<template>
	<div>
		<Form :model="searchData" inline :label-width="80">
			<FormItem label="姓名:" :label-width="60">
                <Input type="text" v-model="searchData.real_name" placeholder="姓名搜索"></Input>
            </FormItem>
			<FormItem label="测量时间：">
            	<DatePicker type="daterange" format="yyyy-MM-dd" placeholder="请选择测量时间" style="width: 200px" @on-change="setTime" @on-clear='clearTime'></DatePicker>	
            </FormItem>
            <Button class="singlebutton" icon="ios-search" type="primary" @click="search">搜索</Button>
		</Form>
		<v-table ref='vTable' :tableColumns="tableColumns" :tableData="tableData" :totalPage="totalPage" :isPage="isPage" @getPage="selectPage"></v-table>
	</div>
</template>

<script>
	import vTable from '@/components/common/Table.vue'
	export default {
		components:{
			vTable
		},
		data(){
			return {
				totalPage: 1,
      			isPage: false,
				searchData: {
					start_time: '',
					end_time: '',
					real_name: ''
				},
				tableColumns: [
					{ title: '姓名',  key: 'real_name', align: "center" },
					{ title: '性别',  key: 'gender', align: "center" },
					{ title: '年龄',  key: 'age', align: "center" },
					{ title: '收缩压',  key: 'systolicPressure', align: "center",
						render: (h, params) => {
							if(params.row.systolicPressure > 139 || params.row.systolicPressure < 90) {
								return h('span',{
									style: { color: 'red' }
								},params.row.systolicPressure)
							} else {
								return  h('span', params.row.systolicPressure);
							}
						}
					},
					{ title: '舒张压',  key: 'diastolicPressure', align: "center",
						render: (h, params) => {
							if(params.row.diastolicPressure > 89 || params.row.diastolicPressure < 60) {
								return h('span',{
									style: { color: 'red' }
								},params.row.diastolicPressure)
							} else {
								return  h('span', params.row.diastolicPressure);
							}
						}
					},
					{ title: '心率',  key: 'p', align: "center",
						render: (h, params) => {
							if(params.row.p > 100 || params.row.p < 60) {
								return h('span',{
									style: { color: 'red' }
								},params.row.p)
							} else {
								return  h('span', params.row.p);
							}
						}
					},
					{ title: '测量时间',  key: 'testTime', align: "center" },
					{
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
                                        	this.$router.push({
                                        		path: "/user/monitor/bloodpre/edit/" + params.row.customer_id,
                                        		query: {obj: params.row}
                                        	});
                                        }
                                    }
                                }, '历史数据')
                            ]);
                        }
                    }
					
				],
				tableData: []
			}
		},
		created(){
			this.getData('/customer_monitor/BP_list', this.searchData)
		},
		methods: {
			// 获取数据
			getData(url,jsonData){
				this.$http.get(url, jsonData)
				.then(({data})=>{
					this.tableData = data.data.list.map((e)=>{
							//  时间戳转日期
							var date = new Date(e.testTime);
							let Y = date.getFullYear() + '-';
							let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
							let D = date.getDate();
							D = D < 10 ? '0' + date.getDate() : D
							e.testTime = Y + M + D
							return e
						})
						//  分页
						this.totalPage = data.data.total;
						if(this.totalPage > 1) {
							this.isPage = true;
						} else {
							this.isPage = false;
						}
						
						if (this.isSearch) {
				        	this.isSearch = false;
				        }
					
//					console.log(data)
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			// 选择时间段
			setTime(date){
				let date1 = new Date(date[0]);
				this.searchData.start_time = Date.parse(date1);
				let date2 = new Date(date[1]);
				this.searchData.end_time = Date.parse(date2);
			},
			// X 掉时间的时候 调接口  开始时间 1980   结束时间 2080
			clearTime(){ 
				this.getData('/customer_monitor/BP_list?start_time=315504000000&end_time=3471264000000')  
			},
			// 分页
			selectPage(pageNum){
//				this.getData('/customer/list?'+ 'page=' + pageNum + '&' + 'limit=' + 10)
				this.getData('/customer_monitor/BP_list', {
					params: {
						page: pageNum,
						limit: 10
					}
				})
				
			},
			// 搜索
			search(){
				this.isSearch = true;
				this.getData('/customer_monitor/BP_list', {
					params: {
						start_time: this.searchData.start_time,
						end_time: this.searchData.end_time,
						real_name: this.searchData.real_name
					}
				})
				
			}
		}
	}
</script>

<style>
</style>